﻿@using Quadrant.web.Helpers
@{
    ViewBag.Title = "Your quadrant";
}
@section Head{
    <link rel="stylesheet" href="~/Content/Quadrant.css">
}
@section scripts
{
    @Html.JQueryVal()
    @Html.TypeScript("~/Scripts/ts/Quadrant.ts")
    <script>
        var CurrentBasePage = new QuadrantPage(
        {
            id: '@ViewBag.Qid',
            urlZones: "@Url.RootUrl()/api/Zones/",
            urlStick: "@Url.RootUrl()/api/Sticks/"
        });
    </script>
    <script id="stick-template" type="text/x-handlebars-template">
        @Html.CompressedPartial("_Stick")
    </script>
}
@*<div class="col-md-2 bg-primary-light maxHeight">Toolbar</div>*@
<div class="col-md-11 maxHeight">
    <div class="col-md-6 divbutton">
        <h3 class="h-title">
            <span id="zh-Name0"></span>&nbsp;
            <a id="za0" class="t-zone-edit">
                <span class="glyphicon glyphicon-edit"></span>
            </a>
        </h3>
    </div>
    <div class="col-md-6 divbutton">
        <h3 class="pull-right h-title">
            <a id="za1" class="t-zone-edit">
                <span class="glyphicon glyphicon-edit"></span>
            </a>&nbsp;
            <span id="zh-Name1"></span>
        </h3>
    </div>
    <div id="stick-container" class="col-md-12 height90percent">
        <div id="z0" class="col-md-6 halfheight light-hatching qBox"><h6 id="zl0" class="pull-right" style="bottom:0;position:absolute"></h6></div>
        <div id="z1" class="col-md-6 halfheight light-hatching qBox"><h6 id="zl1" class="pull-left" style="bottom:0;position:absolute"></h6></div>
        <div id="z2" class="col-md-6 halfheight light-hatching qBox"><h6 id="zl2" class="pull-right"></h6></div>
        <div id="z3" class="col-md-6 halfheight light-hatching qBox"><h6 id="zl3" class="pull-left"></h6></div>
    </div>
</div>
<div class="col-md-1 row maxHeight">
    <div class="height10percent"></div>
    <div class="height45percent">
        <h3 class="v-title v-align">
            <a id="za2" class="t-zone-edit divbutton"><span class="glyphicon glyphicon-edit"></span></a>
            <span id="zh-Name2"></span>
        </h3>
    </div>
    <div class="height45percent">
        <h3 class="v-title v-align">
            <a id="za3" class="t-zone-edit divbutton">
                <span class="glyphicon glyphicon-edit"></span>
            </a>&nbsp;
            <span id="zh-Name3">
            </span>
        </h3>
    </div>
</div>
@Html.CompressedPartial("_EditZone")
@Html.CompressedPartial("_EditStick")
@Html.CompressedPartial("_DeleteStick")